﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Comments Test Home Page</title>
    <link href="/Content/Demo.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.7.1.js" type="text/javascript"></script>
    <script src="/Scripts/knockout-2.1.0.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.validate.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>

    <script type="text/javascript" src="/Scripts/demo4/get.js"></script>
    <script type="text/javascript" src="/Scripts/demo4/post.js"></script>
    <script type="text/javascript" src="/Scripts/demo4/delete.js"></script>
</head>
<body>
    <nav>
        <div class="demo-navigation">
            <a href="demo3-paging.htm">&lt;&lt;&lt; Back</a> 
            | Demo 4 Validation |
            <a href="demo5-authorization.htm">On to Demo 5 - Authorization &gt;&gt;&gt;</a>
        </div>
    </nav>
    <div id="content">
        
        <div id="article">
            <p>
                In this demo, we take advantage of the unobtrusive client validation introduced in 
                ASP.NET MVC and apply it to a static HTML page.
            </p>
            <p>
                Once you pass the client validation rules, note that we also support validation 
                happening on the server. If there are any validation errors, we serialize the 
                model state to JSON and apply the validation back on the client.
            </p>
            <p>
                <strong>After submitting a valid comment, try typing in an author that's more 
                than 10 characters long.</strong>
            </p>
        </div>
        <ul data-bind="template: {name: 'commentTemplate', foreach: comments}">
        </ul>
        <form id="newCommentForm">
            <fieldset>
                <legend>New Comment</legend>
                <label for="text">Comment</label>
                <textarea id="text" name="text" data-val="true" data-val-required="A comment is required."></textarea>
                <span class="field-validation-valid" data-valmsg-for="text" data-valmsg-replace="true"></span>

                <label for="author">Author</label>
                <input id="author" name="author" type="text" data-val="true" data-val-required="Tell us who you are." value="" />
                <span class="field-validation-valid" data-valmsg-for="author" data-valmsg-replace="true"></span>

                <label for="email">Email</label>
                <input id="email" name="email" type="text" data-val="true" data-val-required="What's your email address?" value="" />
                <span class="field-validation-valid" data-valmsg-for="email" data-valmsg-replace="true"></span>
                <button type="submit">Submit</button>
            </fieldset>
        </form>

        <script id="commentTemplate" type="text/html">
            <li class="comment">
                <header>
                    <div class="info">
                        <img data-bind="attr: {src: GravatarUrl}" />
                        <strong><span data-bind="text: Author"></span></strong>
                    </div>
                    <div class="actions">
                        <a class="delete" data-bind="attr: { 'data-comment-id': ID }" href="#">Delete Id: <span data-bind="text: ID" /></a>
                    </div>
                </header>
                <div class="body">
                    <p data-bind="text: Text"></p>
                </div>
            </li>
        </script>
        <script type="text/javascript">
            viewModel = {
                comments: ko.observableArray([])
            };

            ko.applyBindings(viewModel);
        </script>
    </div>
</body>
</html>
